<template>
  <el-form
      ref="registerForm"
      :model="registerUser"
      :rules="registerRules"
      label-width="100px"
      class="registerForm sign-up-form"
      status-icon
  >
    <el-form-item label="用户名" prop="name">
      <el-input
          prefix-icon="el-icon-user"
          v-model="registerUser.name"
          placeholder="Enter UserName..."
      ></el-input>
    </el-form-item>
    <el-form-item  label="邮箱" prop="email">
      <el-input
          prefix-icon="el-icon-message"
          v-model="registerUser.email"
          placeholder="Enter Email..."
      ></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input
          prefix-icon="el-icon-lock"
          v-model="registerUser.password"
          type="password"
          placeholder="Enter Password..."
      ></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="password2">
      <el-input
          prefix-icon="el-icon-lock"
          v-model="registerUser.password2"
          type="password"
          placeholder="Enter Password..."
      ></el-input>
    </el-form-item>

    <el-form-item label="选择身份">
      <el-select  v-model="registerUser.role" placeholder="请选择身份">
        <el-option label="管理员" value="admin"></el-option>
        <el-option label="用户" value="user"></el-option>
        <el-option label="游客" value="visitor"></el-option>
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button
          @click="handleRegister('registerForm')"
          type="primary"
          class="submit-btn"
      >注册</el-button
      >
    </el-form-item>
  </el-form>
</template>
<script lang="ts">
import {defineComponent,getCurrentInstance} from 'vue'
export default defineComponent({
  name:'',
  props: {
    registerUser: {
      type: Object,
      required: true,
    },
    registerRules: {
      type: Object,
      required: true,
    },
  },
  setup(props) {
    // @ts-ignore
    const { ctx } = getCurrentInstance();

    const handleRegister = (formName: string) => {
      //@ts-ignore
      ctx.$refs[formName].validate((valid: any) => {
        if (valid) {
          console.log(props.registerUser)
          ctx.$message({
            message: '注册成功',
            center: true,
            type:'success'
          })
        } else {
          ctx.$message({
            message: '输入格式不正确',
            center: true,
            type:'error'
          })
          return false;
        }
      });
    };

    return { handleRegister };
  }
})
</script>

<style lang='scss' scoped>
.registerForm {
  margin-top: 20px;
  background-color: aliceblue;
  padding: 40px 40px 30px 0;
  border-radius: 30px;
  box-shadow: 13px 13px 30px rgba(103, 103, 107, 0.9);
}
form {
  padding: 0rem 5rem;
  transition: all 0.2s 0.7s;
  overflow: hidden;
}
form.sign-up-form {
  opacity: 0;
  z-index: 1;
  transform: translate(100%,-40%);
}
.submit-btn {
  width: 100%;
}
</style>
